//列表
var listdata2=[
	['上海美橙科技信息发展有限公司',438037],
	['上海贝锐信息科技股份有限公司',45518],
	['上海有孚网络股份有限公司',2],
	['上海福虎信息科技有限公司',0],
	['上海欧网网络科技发展有限公司',0]
]
var listdata3=[
	['上海贝锐信息科技股份有限公司',797674],
	['上海有孚网络股份有限公司',180185],
	['网宿科技股份有限公司',25997],
	['上海福虎信息科技有限公司',0],
	['上海欧网网络科技发展有限公司',0]
]
listEvt(listdata2)

$(".right_content_center li").click(function(){
	n=$(this).index();
	$(this).addClass('active').siblings().removeClass('active')
	if(n==0){
		listEvt(listdata2)
	}else if(n==1){
		listEvt(listdata3)
	}
})

function listEvt(data){
	$(".right_content_center .tab_content").html("")
        for(var i=0;i<data.length;i++){
            $(".right_content_center .tab_content").append("<tr>"+
                    "<td style='width:60px'>"+(i+1)+"</td>"+
                    "<td title='"+data[i][0]+"'>"+data[i][0]+"</td>"+
                    "<td title='"+data[i][1]+"'>"+data[i][1]+"</td>"+
                +"</tr>")
        }
}

//地图
var geoCoordMap = {};
var mapFeatures = echarts.getMap('上海').geoJson.features;
mapFeatures.forEach(function(v) {
    // 地区名称
    var name = v.properties.name;
    // 地区经纬度
    geoCoordMap[name] = v.properties.cp;
});



var mapData=[
	{name:'宝山区',value:2,serverCount:1,authCount:1,recurCount:0,domainCount:0},
	{name:'奉贤区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'虹口区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'黄浦区',value:2,serverCount:1,authCount:0,recurCount:1,domainCount:438037},
	{name:'嘉定区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'静安区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'闵行区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'浦东新区',value:3,serverCount:1,authCount:1,recurCount:1,domainCount:0},
	{name:'普陀区',value:1,serverCount:0,authCount:0,recurCount:1,domainCount:0},
	{name:'青浦区',value:0,serverCount:6,authCount:0,recurCount:0,domainCount:0},
	{name:'松江区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'徐汇区',value:1,serverCount:0,authCount:1,recurCount:0,domainCount:0},
	{name:'杨浦区',value:4,serverCount:2,authCount:2,recurCount:0,domainCount:45520},
	{name:'闸北区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'长宁区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'崇明县',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0},
	{name:'金山区',value:0,serverCount:0,authCount:0,recurCount:0,domainCount:0}
]
	
for(var i=0;i<mapData.length;i++){
	for(var key in geoCoordMap){
		if(key==mapData[i].name){
			mapData[i].value=geoCoordMap[key].concat(mapData[i].value)
		}
	}
}
	
var optionMap = {
	tooltip: {
		trigger: 'item',
		formatter:function(param){
			var name = param.name;
			return '<div>'+param.name+'</div>'+
			       '<div>注册服务机构数量：'+param.data.serverCount+'</div>'+
			       '<div>权威解析机构数量：'+param.data.authCount+'</div>'+
			       '<div>递归解析机构数量：'+param.data.recurCount+'</div>'+
			       '<div>域名数量：'+param.data.domainCount+'</div>';
		}
	},
 	geo: {
		show: true,
		zoom: 1.2,
		roam: false,	
		map:'上海',
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#285ac6',
				borderWidth: 1,
				areaColor: '#123082',
				shadowBlur: 3,
				shadowColor:'#081435',
				shadowOffsetX: -4,
				shadowOffsetY: 8
			},
			emphasis: {
				areaColor: '#fce24f',
				borderColor: '#fce24f'
			}
		}
	},
	series: [{
		type: 'map',
		zoom: 1.2,
		mapType: '上海',
//		geoIndex: 0,
		roam: false,
		label: {
			normal: {
				show: false,
				textStyle: {
					color: '#fff'
				}
			},
			emphasis: {
				show: true,
				textStyle: {
					color: '#fff'
				}
			}
		},
		itemStyle: {
			normal: {
				show:false,
				borderColor: '#3770ea',
				borderWidth: 1,
				areaColor: '#0f2d87'
			},
			emphasis: {
				areaColor: '#2a56bd',
				borderColor: '#2a56bd',
//				opacity: 0.8,
			}
		},
		data:mapData
	},{
		 	name: 'Top 5',
      type: 'effectScatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return val[2]+8;
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:mapData.sort(function(a,b){
				return b.value[2]-a.value[2]
			}).slice(0,5)
	},{
		 	name: 'Top 5',
      type: 'scatter',
      zlevel: 1,
      coordinateSystem: 'geo',
      symbolSize: function (val) {
          return val[2]+5;
      },
      showEffectOn: 'render',
      rippleEffect: {
          brushType: 'stroke'
      },
      hoverAnimation: true,
      label: {
          normal: {
//            formatter: '{b}',
		        position: 'right',
		        show: false
          }
      },
      itemStyle: {
          normal: {
              color: '#f4e925',
              shadowBlur: 10,
              shadowColor: '#333'
          }
      },
//    data: convertData(mapData)
			data:mapData.sort(function (a, b) {
          return b.value[2]-a.value[2]
      }).slice(5)
	}]
};

var mapChart = echarts.init(document.getElementById('ec_map_th'))
mapChart.setOption(optionMap)
//var n=0;
/*function auto(){
//	console.log(mapData[0])
	if(n>mapData.length-1){
		n=0;
	}
	for(var i=0;i<mapData.length;i++){
		mapData[i].selected=false;
	}
	var name = mapData[n].name;
	if(name != '香港' && name !='澳门' && name !='台湾'){
		mapData[n].selected=true;
		//mapData[n].itemStyle.color='red';
		console.log(mapData[n]);
		
		var name = mapData[n].name;
		getResourceNoShow(name);
		
		mapChart.setOption(optionMap);
	}
	n++;
}
auto();*/
var count = 0;
var timer = null;
var dataLength = optionMap.series[0].data.length;
var auto=function(){
		$(".resource_no").html("")
    $(".resource_no").append("<tr>"+
    "<td>"+mapData[count% dataLength].name+"</td>"+
    "<td>"+mapData[count% dataLength].serverCount+"</td>"+
    "<td>"+mapData[count% dataLength].authCount+"</td>"+
    "<td>"+mapData[count% dataLength].recurCount+"</td>"+
    "<td>"+mapData[count% dataLength].domainCount+"</td>"+
	"</tr>")
	mapChart.dispatchAction({
    type: 'downplay',
    seriesIndex: 0,
  });
  mapChart.dispatchAction({
      type: 'highlight',
      seriesIndex: 0,
      dataIndex: (count) % dataLength
  });
  mapChart.dispatchAction({
      type: 'showTip',
      seriesIndex: 0,
      dataIndex: (count) % dataLength
  });
  count++;
}
auto()
var timer=setInterval(auto,2000)
mapChart.on('mouseover',function(parmas){
	clearInterval(timer)
	console.log(parmas)
	$(".resource_no").html("")
    $(".resource_no").append("<tr>"+
    "<td>"+parmas.data.name+"</td>"+
    "<td>"+parmas.data.manageCount+"</td>"+
    "<td>"+parmas.data.serverCount+"</td>"+
    "<td>"+parmas.data.authCount+"</td>"+
    "<td>"+parmas.data.recurCount+"</td>"+
    "<td>"+parmas.data.domainCount+"</td>"+
	"</tr>")
})

mapChart.on('mouseout',function(){
	clearInterval(timer)
	timer=setInterval(auto,2000)
})

ranklistRightData();
function ranklistRightData(){
	var rankListRight = $('#rankListRight');
	rankListRight.empty();
	var datas = [
		['.com',313319],
		['.cn',91316],
		['.net',51260],
		['.top',8194],
		['.在线',2914],
		['.vip',2450],
		['.xyz',2207],
		['.中国',1679],
		['.club',1677],
		['.site',1329],
		['.ren',1155],
		['.wang',987],
		['.info',766],
		['.shop',486],
		['.公司',317],
		['.pro',274],
		['.mobi',259],
		['.网络',217],
		['.ink',216],
		['.biz',179],
		['.我爱你',145],
		['.网址',17],
		['.信息',11],
		['.集团',4],
		['.手机',4]
	];
	var str = "<table class='tab_content'>";
	for(var i = 0 ; i < datas.length ; i++){
		str +="<tr>"+
    	"<td>"+(i+1)+"</td>"+
    	"<td>"+datas[i][0]+"</td>"+
    	"<td>"+datas[i][1]+"</td>"+
    	"</tr>"
	}
	str +="</table>";
	rankListRight.append(str);
}



//柱状图
function yData(data){
	var dataY=[]
	for(var i=0;i<data.length;i++){
		dataY.push(data[i].name)
	}
	return dataY
}

function xData(data){
	var dataX=[]
	for(var i=0;i<data.length;i++){
		dataX.push(data[i].value)
	}
	return dataX
}
var xMax = 10;
//第一个柱状图
var data=[{
	name:'徐汇区',
	value:0
},{
	name:'黄浦区',
	value:1
},{
	name:'浦东新区',
	value:1
},{
	name:'宝山区',
	value:1
},{
	name:'杨浦区',
	value:2
}]

//第二个柱状图
var data2=[{
	name:'黄浦区',
	value:0
},{
	name:'徐汇区',
	value:1
},{
	name:'宝山区',
	value:1
},{
	name:'浦东新区',
	value:1
},{
	name:'杨浦区',
	value:2
}]
//第三个柱状图
var data3=[{
	name:'徐汇区',
	value:0
},{
	name:'宝山区',
	value:0
},{
	name:'浦东新区',
	value:1
},{
	name:'普陀区',
	value:1
},{
	name:'黄浦区',
	value:1
}]

var barOption = function(){
	return {
    tooltip: {
        show: true,
        formatter: "{b} {c}"
    },
    grid: {
        left: '0',
        top: '5%',
        bottom: '0',
        right: '20'
    },
    xAxis: [{
        max: xMax,
        type: 'value',
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        },
        axisLabel: {
            show: false
        },
        splitLine: {
            show: false
        }
    }],
    yAxis: [{
        type: 'category',
//      data: yData(data),
        axisLabel:{
        	show:false,
           color: '#fff'
        },
        axisTick: {
            show: false,
        },
        axisLine: {
            show: false,
        }
    }],
    series: [{
        name: ' ',
        type: 'bar',
        barWidth: 3,
      //  silent: true,
        itemStyle: {
            normal: {
                color: '#586ca7'
            }
        },
        barGap: '-100%',
       // barCategoryGap: '40%',
        data: data.map(function(d) {
            return xMax
        }),
    }, {
        name: ' ',
        type: 'bar',
        barWidth: 3,
        itemStyle: {
            normal: {
                color: '#fffd69'
            }
        },
        label: {
            normal: {
                show: false,
                position: 'right',
                formatter: '{c}%',
            }
        },
//      data: xData(data)
  
    }]
	};
}
//数据设置
var barOption1st=barOption();
barOption1st.series[1].data=xData(data)
barOption1st.yAxis[0].data=yData(data)

var lineChart1 = echarts.init(document.getElementById('ec_line1st'))
lineChart1.setOption(barOption1st)

for(var i=0;i<data.length;i++){
	$(".line_title").prepend('<li>'+data[i].name+'  <strong>'+data[i].value+'</strong></li>')
}

$(".right_content_top li").click(function(){
	n=$(this).index();
	$(this).addClass('active').siblings().removeClass('active')
	if(n==0){
		
		var barOption1st=barOption();
		barOption1st.series[1].data=xData(data)
		barOption1st.yAxis[0].data=yData(data)
		lineChart1.setOption(barOption1st)

		var titleData=yData(data);
		$(".line_title").html("")
		for(var i=0;i<data.length;i++){
			$(".line_title").prepend('<li>'+data[i].name+'  <strong>'+data[i].value+'</strong></li>')
		}
		
	}else if(n==1){
		
		var barOption2st=barOption();
		barOption2st.series[1].data=xData(data2)
		barOption2st.yAxis[0].data=yData(data2)
		lineChart1.setOption(barOption2st)

		$(".line_title").html("")
		for(var i=0;i<data2.length;i++){
			$(".line_title").prepend('<li>'+data2[i].name+'  <strong>'+data2[i].value+'</strong></li>')
		}
		
	}else if(n==2){
		
		var barOption3th=barOption();
		barOption3th.series[1].data=xData(data3)
		barOption3th.yAxis[0].data=yData(data3)
		lineChart1.setOption(barOption3th)

		$(".line_title").html("")
		for(var i=0;i<data3.length;i++){
			$(".line_title").prepend('<li>'+data3[i].name+'  <strong>'+data3[i].value+'</strong></li>')
		}

	}
})

window.addEventListener('resize',function(){
	mapChart.resize();
	lineChart1.resize();
//	pie3Chart.resize()
})